import React, { useEffect } from 'react'

import { connect } from 'react-redux'
import { changePlayingMusicSrc, changePlayingMusicPlan } from '@/store/actions/common.js'

import './music.list.scss'

const MusicList = (props) => {
  const { playIngList = {
      list: [], playId: ''
    },
    data
  } = props
  const { playId } = playIngList

  useEffect(() => {
  }, [props])

  const changePlayingMusicSrcVar = (item) => {
    const { id } = item
    props.changePlayingMusicSrc({
      name: item.name,
      img: item.album ? item.album.blurPicUrl : item.al.picUrl,
      mp3Url: item.mp3Url,
      ...item,
    })
    props.changePlayingMusicPlan({
      list: data,
      playId: id,
    })
  }

  return (
    <ul className='music-list'>
      {
        data && Array.isArray(data) &&
        data.map((item, index) => {
        const isSelect = playId === item.id
         return (
          <li
            key={item.name + index}
            className={ `${ isSelect && 'select-music' } ` + 'music-list-item' }
            onClick={ () => changePlayingMusicSrcVar(item) }
          >
            <div className='music-list-item-left'>
              <p className='worp'>{ item.name }</p>
              <p>{ item.album ? item.album.name : item.al.name }</p>
            </div>
            <i className={ `${ isSelect ? 'icon-xin' : 'icon-icon_huabanfuben'} iconfont` } />
          </li>
         )
        })
      }
    </ul>
  )
}


export default connect(
  (store) => {
    return store.common
  },
  (dispatch) => (
    {
      changePlayingMusicSrc (data) {
        dispatch(changePlayingMusicSrc(data))
      },
      changePlayingMusicPlan (data) {
        dispatch(changePlayingMusicPlan(data))
      },
    }
  )
)(MusicList)